<template>
  <draggable
    :list="list"
    v-bind="$attrs"
    class="drag-board"
    :set-data="setData"
    @change="handleMoved"
  >
    <div
      v-for="(element,index) in list"
      :key="index"
      class="drag-board-item"
      :class="{active:activeIndex===index}"
      @click="handleCheckedComponent(index)"
    >
      <div
        class="drag-board-item-remove"
        @click.stop="handleRemoveComponent(index)"
      >
        <span class="close" />
      </div>
      <div class="drag-board-item-tag">
        {{ element.title }} {{ activeIndex }}
      </div>
      <component
        :is="element.name"
        v-model="element.options"
      />
    </div>
  </draggable>
</template>

<script>
import Draggable from 'vuedraggable'
import BannerAdvert from './components/BannerAdvert'
import FenceColumn from './components/FenceColumn'
import GridColumn from './components/GridColumn'
import GuideLine from './components/GuideLine'
import Mission from './components/Mission'
import Navmenu from './components/Navmenu'
import Notice from './components/Notice'
import PlaceEmpty from './components/PlaceEmpty'
import Seckill from './components/Seckill'
import Swiper from './components/Swiper'
import SpreadActivity from './components/SpreadActivity'
import './components'

export default {
  name: 'EmDraggable',
  components: {
    Draggable,
    BannerAdvert,
    FenceColumn,
    GridColumn,
    GuideLine,
    Mission,
    Navmenu,
    Notice,
    Seckill,
    PlaceEmpty,
    Swiper,
    SpreadActivity
  },
  provide: {
    setting: {
      defaultImage: 'https://multi.niuteam.cn/public/static/ext/diyview/img/crack_figure.png',
      msg: 'hello child'
    }
  },
  props: {
    options: {
      type: Object,
      default() {
        return {}
      }
    },
    activeIndex: {
      type: Number,
      default: 0
    },
    list: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      msg: 'hello child',
      customProps: [
        {
          title: 'test'
        }
      ]
    }
  },
  watch: {
    list: {
      handler(val) {
        console.log('list: ', val)
      },
      deep: true
    }
  },
  methods: {
    handleMoved(e) {
      console.log('log', e)
      this.handleCheckedComponent(e.moved.newIndex)
    },
    handleCheckedComponent(index) {
      console.log('index', index)
      this.$emit('checked', index)
    },
    handleRemoveComponent(index) {
      console.log(index)
      this.$confirm('此操作将删除已配置的插件内容, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$emit('remove', index)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    setData(dataTransfer) {
      console.log('dataTransfer', dataTransfer)
      // to avoid Firefox bug
      // Detail see : https://github.com/RubaXa/Sortable/issues/1012
      dataTransfer.setData('Text', '')
    }
  }
}
</script>
<style lang="scss">
.em-card {
  border-end-end-radius: 0;
  border-end-start-radius: 0;
  &__toolbar {
    color: gray;
    .em-icon {
      font-size: 14px;
    }
  }
}
</style>
<style lang="scss" scoped>
.close {
  width: 16px;
  height: 16px;
  display: block;
  cursor: pointer;
  transform: rotate(45deg);
  position: relative;
  overflow: hidden;
  transform-origin: center;
  color: inherit;
  &:hover {
    color: inherit;
  }
  &::before,
  &::after {
    position: absolute;
    content: '';
    background: currentColor;
    border-radius: 4px;
  }
  &::before {
    width: 100%;
    height: 2px;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }
  &::after {
    width: 2px;
    height: 100%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
}
.drag-board {
  display: flex;
  flex-direction: column;
  &-item {
    position: relative;
    width: 100%;
    border: 1px dashed transparent;
    min-height: 20px;

    cursor: move;
    &.active,
    &:hover {
      border-color: #ff6600;
    }
    &-remove,
    &-tag {
      position: absolute;
      opacity: 0;
      z-index: 999;
    }
    &-remove {
      right: -1px;
      top: -1px;
      padding: 3px 4px;
      color: #ffffff;
      background: #666;
      border-radius: 0 0 0 5px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      max-height: 100%;
    }
    &-tag {
      position: absolute;
      left: 0;
      top: 0;
      background: rgba(0, 0, 0, 0.2);
      color: #ff6600;
      font-size: 12px;
      padding: 0 3px;
      max-height: 100%;
    }
    &:hover &-tag,
    &:hover &-remove {
      opacity: 1;
    }
  }
}
</style>

